<layout name='layout_page' />
<link rel="stylesheet" href="<{:STATICS}>/centaurus/css/libs/timeline.css" type="text/css"/>

<div class="row">
	<div class="col-lg-12">
		<div class="row">
			<div class="col-lg-12">
				<ol class="breadcrumb">
					<li><a href="<{:U('Index/index')}>">Home</a></li>
					<li class="active"><span>Training plan</span></li>
				</ol>
				<h1>Training plan</h1>
			</div>
		</div>


		<div class="row">
			<div class="col-lg-4">
				<div class="main-box no-header clearfix">
					<div class="main-box-body clearfix">
						<form id="ajaxForm" action="<{:U('Plan/save')}>" method="post" class="form-horizontal form-validata">
							<div class="form-group menteesBase">
								<img src="<{$mentees['face']|getFace=###}>">
								<p><{$mentees['nickname']}><br/><span class="label label-primary"><{$train['trainItem']}></span></p>
							</div>	

							<div class="form-group">
								<label>Title</label>
								<input type="text" class="form-control" id="title" name="title" placeholder="Enter title" data-rule-required="true">
							</div>	

							<div class="form-group">
								<label>Start time</label>								
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
									<input type="text" class="form-control" id="startTime" name="startTime" placeholder="Enter start time" data-rule-required="true">
								</div>
							</div>

							<div class="form-group">
								<label>End time</label>
								<div class="input-group">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
									<input type="text" class="form-control" id="endTime" name="endTime" placeholder="Enter end time" data-rule-required="true">
								</div>								
							</div>		

							<script> 
							$(function(){
								$("#startTime" ).datepicker({
									minDate: new Date()
								});
								$("#endTime" ).datepicker({
									minDate: new Date()
								});
							});
							</script>

							<div class="form-group">
								<label for="exampleTextarea">Descriptions</label>
								<textarea class="form-control" name="content" id="content" rows="5" data-rule-required="true"></textarea>
							</div>	

							<div class="form-group">				
								<button type="submit" id="myBtn" class="btn btn-success">Create Plan</button>	
							</div>
							<input type="hidden" name="trainID" value="<{$train['id']}>">
							<input type="hidden" name="mentorsID" value="<{$Mentors['userid']}>">
							<input type="hidden" name="mentorsName" value="<{$Mentors['nickname']}>">
							<input type="hidden" name="mentorsFace" value="<{$Mentors['face']}>">
							<input type="hidden" name="menteesID" value="<{$mentees['userid']}>">
							<input type="hidden" name="menteesName" value="<{$mentees['nickname']}>">
							<input type="hidden" name="menteesFace" value="<{$mentees['face']}>">
						</form>
					</div>
				</div>
			</div>

			<div class="col-lg-8">
				<section id="cd-timeline" class="cd-container" style="height:1000px">
					
				</section>

			</div>
		</div>
	</div>
</div>